<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path = request.getContextPath();
    request.setAttribute("path",path);%>
<html>
<head>
    <title>Title</title>
    <script src="${path}/js/echarts/echarts.min.js"></script>
    <script src="${path}/js/jquery.min.js"></script>
</head>
<body>
    <h1 style="color: rgba(255,127,138,0.49)"></h1>
    <div id="main" style="width: 600px;height:350px;float: left"></div>
    <div id="gender" style="width: 600px;height:350px;float: left"></div>
    <div id="avg" style="width: 600px;height:350px;float: left"></div>
    <div id="money" style="width: 600px;height:350px;float: left"></div>
</body>
<script type="text/javascript">
    showMain();
    function  showMain(){
        var myDiv=document.getElementById('main');
        var echartsEle = echarts.init(myDiv,'dark');
        option = {
            title: {
                text: '用户年龄分布表',
                left: 'center',
                textStyle:{
                    color:"gray"
                },
            },
            backgroundColor:'rgba(128, 128, 128, 0.1)',
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle:{
                    fontSize: 12,//字体大小
                    color: 'gray'//字体颜色
                },
            },
            series: [
                {
                    name: '年龄分布占比：',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '18~25岁' },
                        { value: 735, name: '26~35岁' },
                        { value: 580, name: '36~45岁' },
                        { value: 484, name: '46~55岁' },
                        { value: 300, name: '56~65岁' },
                        { value: 300, name: '65岁以上' }
                    ],
                    label: {
                        show:true,//是否展示字
                        position: 'left',
                        color:'gray'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        }
                    }
                }
            ]
        };
        echartsEle.setOption(option);
    }

    showGeder();
    function showGeder(){
        var myDiv=document.getElementById('gender');
        var echartsEle = echarts.init(myDiv,'dark');
        $.post("/stat/getGender",function (data) {
            var option = {
                title:{
                    x:"center",//标题水平位置
                    y:'top',//标题垂直位置
                    text:"用户性别分布表",
                    textStyle:{
                        color:"gray"
                    },
                },
                backgroundColor:'rgba(128, 128, 128, 0.1)',
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'left',
                    textStyle:{
                        fontSize: 12,//字体大小
                        color: 'gray'//字体颜色
                    },
                },

                    series: [
                    {
                        name: '用户性别占比：',//mousrHover出发的标题
                        type: 'pie',
                        radius: ['40%', '50%'],
                        color:["pink","#7eeaf4"],//组件颜色
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',//边框颜色
                            borderWidth: 2
                        },
                        label: {
                            show:true,//是否展示字
                            position: 'left',
                            color:'gray'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data:data
                    }
                ]
            };
            echartsEle.setOption(option);
        },"json");


    }

    showRoomAvg();
    function showRoomAvg(){
        // {name:"['大床房',总统房,情侣房]",price:"[100,200,300]"}
        var myDiv=document.getElementById('avg');
        var echartsEle = echarts.init(myDiv,'dark');
        $.post("/stat/getAvg",function (data){
            var nameData=data.name;
            var priceData=data.price;
            var option = {
                title: {
                    text: '房屋入住统计表',
                    left: 'center',
                    textStyle:{
                        color:"gray"
                    },
                },
                backgroundColor:'rgba(128, 128, 128, 0.1)',
                xAxis: {
                    type: 'category',
                    data: nameData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        itemStyle : {
                            normal: {
                                label : {
                                    show: true,
                                    color: "black",
                                    fontSize: 15,//字体大小
                                }
                            }
                        },
                        data: priceData,
                        type: 'bar'
                    }
                ]
            };
            echartsEle.setOption(option);
        },"json");
    }

    showMoney();
    function showMoney(){
        var myDiv=document.getElementById('money');
        var echartsEle = echarts.init(myDiv,'dark');
        var option = {
            title: {
                text: '月度效益走势表',
                left: 'center',
                textStyle:{
                    color:"gray"
                },
            },
            backgroundColor:'rgba(128, 128, 128, 0.1)',
            xAxis: {
                type: 'category',
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    interval: 0,//使x轴文字显示全
                },
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
            },
            yAxis: {
                type: 'value',

            },
            series: [{
                    itemStyle : {
                        normal: {
                            label : {
                                show: true,
                                color: "gray",
                            }
                        }
                    },
                    data: [15000, 23000, 22400, 21800, 13500, 14700, 26000,15000, 23000, 22400, 21800, 13500],
                    type: 'line'
                }]
        };
        echartsEle.setOption(option);
    }
</script>

</html >
